<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="loginText">登录</span>
        <router-link class="link" to="/register">还未注册？注册</router-link>
      </div>
      <div class="card_body">
        <!-- <el-input class="input" placeholder="请输入账号" v-model="username" clearable></el-input>
        <el-input class="input" type="password" placeholder="请输入密码" v-model="password" clearable></el-input>
        <el-button class="btn" @click="login" type="info">登录</el-button>-->
        <el-form
          :model="loginUser"
          status-icon
          :rules="rules"
          ref="loginUser"
          class="demo-loginUser"
        >
          <el-form-item label="" prop="username">
            <el-input class="input" placeholder="请输入账号" v-model="loginUser.username" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input class="input" placeholder="请输入密码" type="password" v-model="loginUser.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn" type="info" @click="submitForm('loginUser')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import router from '../models/router'

export default {
  name: "Login",
  data() {
    const validUsername= (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loginUser: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ validator: validUsername, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            const res = await this.$req.user.login(this.loginUser);
            if (res.data.status === 200 && res.data.token) {              
              // ls中存储token
              localStorage.setItem('token', `Bearer ${res.data.token}`);
              router.push('/index');
            }
          } catch(ex) {
            console.log(ex);
          }
        } else {
          return false;
        }
      });
    },
  },
  created() {
    var myCity = new BMap.LocalCity();
    myCity.get((res) => {
      localStorage.setItem('city', res.name)
    });
  }
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../assets/login.jpeg") no-repeat center center;
  background-size: 100% 100%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.demo-loginUser {
  width: 100%;
  height: 100%;
}
.box-card {
  width: 320px;
  position: absolute;
  left: 50px;
  top: 50px;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.5);
  color: #909399;
}
.box-card /deep/ .el-card__header {
  border: none;
  padding: 10px 12px;
}
.card_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.input /deep/ .el-input__inner {
  background-color: #17273b;
  border: 1px solid #3b4751;
}
.link {
  float: right;
  padding: 3px 0;
  color: #909399;
  font-size: 14px;
  text-decoration-line: none;
}
.btn {
  width: 100%;
  color: #909399;
  background-color: #49525b;
  border-color: #49525b;
}
.el-button--info:focus,
.el-button--info:hover {
  background-color: #909399;
  border-color: #909399;
  color: #fff;
}
.loginText {
  font-weight: bold;
}
</style>
